<template>
	<view>
		<u-navbar title="个人中心" placeholder leftIconSize="0" />
		<view class="me-title">
			<view class="me-img">
				<u--image :showLoading="true" :src="userInfo.avatar || '/static/image/no-login.png'" :fade="true"
					duration="450" shape="circle" width="52px" height="52px"></u--image>
				<text class="me-name">{{userInfo.userName}}</text>
			</view>
			<u-tag v-if="userInfo.id" type="primary" :text="`积分: ${userInfo.totalPoints || 0}`"></u-tag>
			<view @click="toLogin" v-else style="font-size: 36rpx;color: #333;">立即登录</view>
		</view>
		<view class="fun-box" v-for="(row, rowIndex) in funs" :key="rowIndex">
			<view class="fun-title">
				<text>{{row.title}}</text>
			</view>
			<view class="fun-content">
				<view class="fun-item" v-for="(item, index) in row.list" :key="index" @tap="toFun(item)">
					<u--image :showLoading="true" :src="item.img" shape="circle" width="36px" height="36px"></u--image>
					<text class="fun-item-title">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view style="height: 32rpx;" />
		<view class="logout-box" v-if="userInfo.id">
			<u-button @click="logOut" type="primary" text="退出登录"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		userQueryById,
		logout,
		getPointInfo
	} from '@/api/home.js';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['userInfo', 'isCheck']),
			funs() {
				let title = this.userInfo.isPerfect === '0' ? '完善资料' : '修改资料';
				let list1 = [
					{
						path: '/pages/index/points_record',
						title: '积分明细',
						img: '/static/image/home/2.png'
					},
					{
						path: '/pages/me/rank',
						title: '积分排行',
						img: '/static/image/home/3.png'
					},
				];
				if(this.userInfo.checkUser === '1') {
					list1.push({
								path: '/pages/me/rank',
								title: '积分核销',
								img: '/static/image/saoyisao.png',
								isClick: true
							})
					list1.push({
								path: '/pages/me/check_record',
								title: '核销记录',
								img: '/static/image/xiulijilu.png',
							})
				}
				let list = [{
						title: '积分功能',
						list: list1,
					},
					{
						title: '其他相关',
						list: [{
								path: '/pages/me/shopAddress',
								title: '兑换地址',
								img: '/static/image/home/4.png'
							},
							{
								path: '/pages/register/index',
								title,
								img: '/static/image/ziliao.png'
							},
							{
								path: '/pages/me/answer',
								title: '帮助中心',
								img: '/static/image/answer.png'
							},
						]
					}
				]
				return list;
			}
		},
		onShow() {
			let {
				id
			} = this.userInfo;
			if (id) {
				userQueryById({
					id
				}).then(res => {
					this.setUserInfo({
						userInfo: res.result
					})
				})
			}
		},
		methods: {
			...mapActions(['setUserInfo', 'setDetail']),
			toFun({
				path,
				isClick
			}) {
				if(isClick) {
					const that = this;
					uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode'],
						success: function(res) {
							if (res.result) {
								try{
									const result1 = JSON.parse(res.result);
									that.$cuLoading('查询中...').then(() => {
										getPointInfo({recordIds: result1.id}).then((res) => {
											const {code, success, result} = res;
											if(code === 200 && success) {
												if(result.length === 1) {
													that.setDetail({detail: result[0]});
												} else {
													that.setDetail({});
												}
											} else {
												that.setDetail({});
											}
										}).finally(() => {
											that.$cuNavigateTo('/pages/me/scan')
											uni.hideLoading();
										});
									})
								}catch(e){
									that.$cuTip('非正常二维码');
									//TODO handle the exception
								}
							}
						}
					});
				} else {
					this.$cuNavigateTo(path);	
				}
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			logOut() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: `确定要退出吗？`,
					confirmColor: '#e1251b',
					success: function(res) {
						if (res.confirm) {
							that.$cuLoading('退出中...').then(() => {
								logout().then(res => {
									uni.hideLoading();
									that.$cuTip('退出成功').then(() => {
										uni.clearStorageSync();
										that.setUserInfo({
											userInfo: {}
										})
									});
								}).catch(() => {
									uni.hideLoading();
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.me-title {
		height: 200rpx;
		display: flex;
		align-items: center;
		padding: 0 $uni-padding;

		.me-img {
			display: flex;
			align-items: center;
			margin-right: 32rpx;

			.me-name {
				color: #000;
				padding-left: $uni-padding;
			}
		}
	}

	.fun-box {
		margin: $uni-padding;
		margin-top: 0;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
		padding: $uni-padding;

		.fun-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
			padding-bottom: 32rpx;
		}

		.fun-content {
			display: flex;
			align-items: center;
			padding: 0;

			.fun-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 25%;

				.fun-item-title {
					font-size: 28rpx;
					color: #333;
					padding-top: 12rpx;
					font-weight: bold;
				}
			}
		}
	}

	.logout-box {
		padding: 0 $uni-padding;
	}
</style>
